<!-- 状态栏组件 - 显示当前登录用户和退出按钮 -->
<div class="status-bar" style="position: fixed; top: 0; left: 0; width: 100%; background-color: #f8f9fa; padding: 10px 20px; border-bottom: 1px solid #dee2e6; z-index: 1000; display: flex; justify-content: space-between; align-items: center;">
    <div class="user-info" style="font-size: 14px; color: #6c757d;">
        当前用户: <span class="username" style="font-weight: bold; color: #495057;">{{ session.username if session and session.username else '未登录' }}</span>
    </div>
    <div class="status-actions">
        <button onclick="logout()" class="btn btn-outline-danger btn-sm" style="font-size: 12px; padding: 4px 8px;">
            <i class="bi bi-box-arrow-right"></i> 退出
        </button>
    </div>
</div>

<script>
function logout() {
    if (confirm('确定要退出登录吗？')) {
        window.location.href = '/ej_logout';
    }
}
</script>

<style>
.status-bar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 确保状态栏不会遮挡页面内容 */
body {
    padding-top: 60px; /* 为状态栏预留空间 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .status-bar {
        padding: 8px 15px;
    }
    
    .user-info {
        font-size: 12px;
    }
    
    .btn-sm {
        font-size: 11px;
        padding: 3px 6px;
    }
    
    body {
        padding-top: 50px;
    }
}
</style>
